<template>
  <div class="todo-item" :class="{'active':todo.checked}">
    <input @change="dotoChange" type="checkbox" :checked="todo.checked" />
    <label>{{todo.content}}</label>
    <button @click="clearTodo">删除</button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: {
      type: Object,
      dafault: {},
    },
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    dotoChange() {
      this.$emit('changeTodo', this.todo)
    },
    clearTodo() {
      this.$emit('clearTodo', this.todo)
    },
  },
}
</script>

<style lang="stylus" scoped>
.todo-item
  display: flex
  align-items: center
  justify-content: space-between
  padding: 10px

  &:hover
    button
      display: block

  label
    flex: 1
    margin: 0 20px
    font-size: 24px
    transition: color 0.5s

  &.active
    label
      color: #d9d9d9
      text-decoration: line-through

  input[type='checkbox']
    width: 30px
    height: 30px
    appearance: none
    outline: none
    border: none

    &:after
      content: url('~image/yuan.svg')

    &:checked
      content: url('~image/dui.svg')

  button
    width: 50px
    appearance: none
    border: none
    outline: none
    background: #3d86fe
    color: #FFF
    border-radius: 16px
    text-align: center
    line-height: 30px
    display: none
    cursor: pointer
</style>